<template>
    <view class="rider_bank_account">
        <uni-popup ref="addBankPopupRef" type="center" background-color="#fff">
            <div class="add_bank_cont_box">
                <div class="row_line_title">
                    添加银行卡
                    <uni-icons type="close" size="30" class="close_icon_btn" @click="closeAddBankPopup"></uni-icons>
                </div>
                <div class="row_line">
                    <div class="title">
                        卡号
                    </div>
                    <div class="value">
                        <uni-easyinput 
                            class="uni-mt-5"
                            trim="all" 
                            v-model="value" 
                            placeholder="请输入银行卡号"
                            placeholderStyle="color:#afa8b1" 
                            @input="input" 
                            :inputBorder="false" 
                            :clearable="false" 
                            type="number"
                            styles="color:#000"
                        ></uni-easyinput>
                    </div>
                </div>
                <div class="row_line">
                    <div class="title">
                        银行
                    </div>
                    <div class="value">
                        <uni-easyinput 
                            class="uni-mt-5"
                            trim="all" 
                            v-model="value" 
                            placeholder="请输入所属银行"
                            placeholderStyle="color:#afa8b1" 
                            @input="input" 
                            :inputBorder="false" 
                            :clearable="false" 
                            type="text"
                            styles="color:#000"
                        ></uni-easyinput>
                    </div>
                </div>
                <div class="row_right_text">
                    例如：中国农业银行
                </div>
                <div class="row_line">
                    <div class="title">
                        持卡人
                    </div>
                    <div class="value">
                        <uni-easyinput 
                            class="uni-mt-5"
                            trim="all" 
                            v-model="value" 
                            placeholder="请输入持卡人姓名"
                            placeholderStyle="color:#afa8b1" 
                            @input="input" 
                            :inputBorder="false" 
                            :clearable="false" 
                            type="text"
                            styles="color:#000"
                        ></uni-easyinput>
                    </div>
                </div>
                <div class="row_line_tips">
                    请确保所填信息的正确性，否者提现时无法正确入账
                </div>

                <div class="confirm_add_btn">
                    确认添加
                </div>

            </div>
        </uni-popup>


        <div class="bank_list">
            <div class="bank_item" v-for="(item,index) in 5" :key="index">
                <div class="left_icon">
                    <image src="~@/riderUser/static/bank.png" class="bank_icon"/>
                </div>
                <div class="right_cont">
                    <div class="bank_info_box">
                        <div class="row_item_1">
                            <div class="bank_name">农业银行</div>
                            <div class="bank_type">储蓄卡</div>
                        </div>
                        <div class="row_item_2">
                            <div class="lifted_btn">解除</div>
                        </div>
                    </div>
                    <div class="bank_number">
                        3254 4152 3657 1234
                    </div>
                </div>
            </div>
            <div class="bank_item bank_item_add" @click="openAddBankPopup">
                <uni-icons type="plusempty" size="20" class="add_icon" color="#000"></uni-icons>
                <div class="add_more_bank">
                    添加银行卡
                </div>
            </div>
        </div>

    </view>
</template>

<script src="./bank-account.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './bank-account.styl';
</style>
